<template>
    <div class="address-choose">
        <div class="address" v-for="(item, key) in addressList" :key="key"  :class="item.id === getLastChoose ? 'last-choose': 'un-choose' ">
            <div class="show-border" :class="item.id === getLastChoose ? 'show' : 'none'">
                <border-colorful/>
            </div>
            <div class="single-address">
                <div class="first-a">
                    <!--<svg aria-hidden="true" class="icon-check" :class="item.default == 1 ? 'choose' : 'no-choose' ">-->
                        <!--<use xlink:href="#icon-selected"></use>-->
                    <!--</svg>-->
                    <div class="address-content" @click="choose(item.id)">
                        <div class="address-per">
                            <div class="receive">{{item.name}}</div>
                            <div class="phone">{{item.phone}}</div>
                            <div class="default" v-if="item.default == 1">默认</div>
                        </div>
                        <div class="address-area">
                            {{item.province + item.city + item.county + item.address}}
                        </div>
                    </div>
                    <svg aria-hidden="true" class="icon-edit" @click="editAddress(item.id)">
                        <use xlink:href="#icon--address_edit"></use>
                    </svg>
                </div>
            </div>
            <div class="line"></div>
        </div>
        <div class="bottom">
         <div class="confirm" @click="toAddAddress">+新建地址</div>
        </div>
    </div>
</template>

<script>
    import API from '../../request/api';
    import BorderColorful from "../../components/common/border-colorful";
    export default {
        components: {BorderColorful},
        name: "address-choose",
        data() {
            return{
                addressList: [],
                checkState: false,
                lastId: ''
            }
        },
        computed:{
            getChooseState(item){
                // let flag = false;
                if(item.default === 1) {
                    this.checkState = true
                }
                return this.checkState
            },
            getLastChoose(){
                let id = this.$route.query.id;
                if (this.lastId === ''){
                    if(id){
                        this.lastId = id;
                    }else {
                        this.addressList.filter(it=>{
                            if (it.default == 1) {
                                this.lastId = it.id
                            }
                        })
                    }
                }
                // console.log('getLastChoose,', this.lastId);
                return this.lastId
            }
        },
        created() {
        },
        methods: {
            choose (id) {
                this.lastId = id;
                setTimeout(()=>{
                    this.$router.push({
                        name:'order-created',
                        query: {
                            id: id
                        }
                    });
                }, 100);
            },
            toAddAddress() {
                this.$router.push('address-add')
            },
            editAddress(id){
                this.$router.push({
                    name: 'address-edit',
                    query:{
                        id: id,
                        direct: 'address-choose'
                    },
                })
            },
        },
        mounted() {
            // 获取 地址列表
            this.request.get(API.getAddressList).then((result) =>{
                this.addressList = this.addressList.concat(result.list)
                console.log('getAddressList-result',result, this.addressList)
            }).catch((err) => {
                this.$toast.fail(err);
            });
        }
    }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl'
    .line{
        position relative
        line()
    }
    .address-choose{
        width vw(375)
        margin-bottom vw(80)
        overflow-x hidden
    }
    .address{
        background-color grayF
    }
    .show{
        display block
    }
    .none{
        display none
    }
    .un-choose{
        width 100%
        height 100%
        background-color grayF
    }
    .last-choose{
        width 100%
        height 100%
        /*background-color #FFF4F5*/
        border-left #D12E2E vw(2) solid
    }
    .single-address{
        width vw(375)
        height vw(90)

        box-sizing border-box
        padding cellPadding;
        border-radius vw(5)
        display flex
        justify-content space-between
        align-items center
        line-height 1.5
        /*position absolute*/
        /*top 0*/
        .first-a {
            display flex
            width 100%
            line-height 1
            justify-content space-between
            align-items center
            .icon-check {
                width vw(20)
                height vw(20)
                fill grayE
            }
            .no-choose {
                fill grayE
            }
            .choose {
                fill main-color
            }
            .address-content {
                width vw(291)
                word-vw(word14, gray3)
                /*border 1px solid aqua*/
                .address-per {
                    display flex
                    justify-content flex-start
                    line-height 1.5
                    margin-right smallMargin
                }
                .address-area {
                    display flex
                    justify-content space-between
                    flex-wrap wrap
                    color gray9
                    line-height 1.5
                }
                .receive {
                    margin-right smallMargin
                }
                .default {
                    margin-left titleMargin
                    border vw(1) solid main-color
                    word-vw(word12, main-color)
                    border-radius all-radius
                    height vw(16)
                    line-height vw(16)
                    width vw(36)
                    display flex
                    justify-content center
                }
            }
            .icon-edit {
                width vw(20)
                height vw(20)
            }
        }
    }
    .bottom {
        background grayF
        position fixed
        bottom 0
        width vw(375)
        height vw(60)
        line-height vw(21)
        display flex
        justify-content center
        box-sizing border-box
        word-vw(word16, gray3)
        padding smallMargin
        .confirm {
            big-solid()
            justify-content center
        }
    }

</style>